Page({
  data: {
    fixed: false,   //是否固定定位
    tab_list:[ '第一个盒子','第二个盒子','第三个盒子' ], //导航列表 长度应该与盒子数一致
    cur_tab:0,      //当前的盒子
    box_list:[],
    into_view:'',
  },

  onScroll(e){
    const scroll_top = e.detail.scrollTop;
    this.setTabbar(scroll_top)
    this.scrollSetTabBar(scroll_top)
  },

  //设置tabbar 是否固定
  setTabbar(scroll_top){
    this.setData({ fixed: scroll_top >= 450? true : false})
  },

  //滚动切换tabbar
  scrollSetTabBar(scroll_top){
    const { box_list } = this.data;
    for (let i in box_list){
      const top = scroll_top > box_list[i].top - 120;
      const bottom = scroll_top <= box_list[i].bottom;
      if (top && bottom) this.setData({ cur_tab: i })
    }
  },

  //点击盒子 tabbar切换
  tapBox(e){
    const cur_tab = e.currentTarget.dataset.id;
    const into_view = `box${cur_tab}`
    this.setData({ cur_tab, into_view })
  },

  getBoxDom(){
    const query = wx.createSelectorQuery()
    query.selectAll('.item').boundingClientRect()
    query.exec(res=> {
      const box_list = res[0]
      this.setData({ box_list })
    })
  },

  onLoad(){
    this.getBoxDom()
  }
})